<template>
  <div class="navigation">
    <div class="box" @click="intoHowUse">
      <span class="bg-pic howUse"></span>
      <span class="text">如何使用</span>
    </div>
    <div class="box" @click="intoVip">
      <span class="bg-pic vip"></span>
      <span class="text">会员权益</span>
    </div>
    <div class="box" @click="intoTeacher">
      <span class="bg-pic teacher"></span>
      <span class="text">线下辅导</span>
    </div>
    <div class="box" @click="intoSuggestion">
      <span class="bg-pic suggestion"></span>
      <span class="text">建议反馈</span>
    </div>
    <div class="box" @click="intoJoke">
      <span class="bg-pic joke"></span>
      <span class="text">程序猿笑话</span>
    </div>
    <div class="box" @click="intoTopic">
      <span class="bg-pic topic"></span>
      <span class="text">码农心声</span>
    </div>
    <div class="box" @click="intoIcu">
      <span class="bg-pic icu"></span>
      <span class="text">996.ICU</span>
    </div>
    <div class="box" @click="intoLove">
      <span class="bg-pic love"></span>
      <span class="text">爱心</span>
    </div>
    <div class="box" @click="intoOffer">
      <span class="bg-pic offer"></span>
      <span class="text">面试</span>
    </div>
    <div class="box" @click="intoWait">
      <span class="bg-pic wait"></span>
      <span class="text">敬请期待</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "",
    components: {},
    data() {
      return {
        navInfo: [],
        howUseUrl: "",
        vipUrl: "",
        teacherUrl: "",
      }
    },
    methods: {
      intoHowUse: function () {
        const {href} = this.$router.resolve({
          // path: `/howUse`
        });
        window.open(this.howUseUrl, '_blank');
      },
      intoVip: function () {
        const {href} = this.$router.resolve({
          path: `/vip`
        });
        window.open(this.vipUrl, '_blank');
      },
      intoTeacher: function () {
        const {href} = this.$router.resolve({
          path: `/teacher`
        });
        window.open(this.teacherUrl, '_blank');
      },
      intoSuggestion: function () {
        const {href} = this.$router.resolve({
          path: `/suggestion`
        });
        window.open(href, '_blank');
      },
      intoJoke: function () {
        const {href} = this.$router.resolve({
          path: `/joke`
        });
        window.open(href, '_blank');
      },
      intoTopic: function () {
        const {href} = this.$router.resolve({
          path: `/interview`
        });
        window.open(href, '_blank');
      },
      intoIcu: function () {
        const {href} = this.$router.resolve({
          path: `/icu`
        });
        window.open(href, '_blank');
      },
      intoLove: function () {
        const {href} = this.$router.resolve({
          path: `/love`
        });
        window.open(href, '_blank');
      },
      intoOffer: function f() {
        const {href} = this.$router.resolve({
          path: `/offer`
        });
        window.open(href, '_blank');
      },
      intoWait: function () {
        const {href} = this.$router.resolve({
          path: `/wait`
        });
        window.open(href, '_blank');
      },
      getNavInfo: function () {

        this.axios.get(`nav/navInfo/navInfoList`)
          .then((resp) => {
            this.navInfo = resp.data.data
            for (let i of this.navInfo) {
              let name = i.navName;
              switch (name) {
                case "如何使用":
                  this.howUseUrl = i.url;
                  break;
                case "会员权益":
                  this.vipUrl = i.url;
                  break;
                case "线下辅导":
                  this.teacherUrl = i.url;
                  break;
              }
            }
          })
      }
    },
    mounted() {
      this.getNavInfo();
    }
  }
</script>

<style scoped>
  .navigation {
    width: 1200px;
    min-height: calc(100vh - 70px);
    margin: 0 auto;
  }

  /*字体样式*/
  .navigation .box {
    border-radius: 4px;
    width: 200px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    line-height: 70px;
    font-family: Arial;
    font-weight: initial;
    color: #000000;
    font-size: 20px;
    background-color: #F3F5F6;
  }

  .navigation .box .text {
    display: inline-block;
    font-size: 20px;
  }

  /*位置*/
  .navigation .box {
    float: left;
    margin-top: 40px;
    margin-left: 70px;
  }

  .navigation .box .bg-pic {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: 100% 100%;
    vertical-align: middle;
    margin-right: 8px;
  }

  .navigation .box .howUse {
    width: 40px;
    height: 40px;
    background-image: url(../../assets/nav/howUse.png);
  }

  .navigation .box .vip {
    width: 40px;
    height: 50px;
    background-image: url(../../assets/nav/vip.png);
  }

  .navigation .box .teacher {
    width: 45px;
    height: 45px;
    background-image: url(../../assets/nav/teacher.png);
  }

  .navigation .box .suggestion {
    background-image: url(../../assets/nav/suggestion.png);
  }

  .navigation .box .love {
    width: 40px;
    height: 40px;
    background-image: url(../../assets/nav/love.png);
  }

  .navigation .box .offer {
    width: 55px;
    height: 55px;
    margin-right: 0px;
    background-image: url(../../assets/nav/offer.png);
  }

  .navigation .box .joke {
    width: 40px;
    height: 40px;
    background-image: url(../../assets/nav/joke.png);
  }

  .navigation .box .topic {
    width: 55px;
    height: 55px;
    background-image: url(../../assets/nav/topic.png);
  }

  .navigation .box .icu {
    background-image: url(../../assets/nav/icu.png);
  }

  .navigation .box .wait {
    width: 40px;
    height: 40px;
    background-image: url(../../assets/nav/wait.png);
  }
</style>
